<!--
- File:    编辑收货地址.
-->
<template>
  <div>
    <div class="Web_Box">
      <div class="EditReceiptAddress">
        <ul>
          <li class="sli">
            <div class="lefticon"><i class="iconfont icon-user2"></i></div>
            <div class="fl w550">
              <input type="text" name="name" class="inp" placeholder="填写收货人姓名" v-model="addressEdit.true_name">
            </div>
          </li>
          <li class="sli">
            <div class="lefticon"><i class="iconfont icon-tel"></i></div>
            <div class="fl w550">
              <input type="text" class="inp" placeholder="填写联系电话" v-model="addressEdit.mob_phone">
            </div>
          </li>
          <li class="sli" v-show="false">
            <div class="lefticon"><i class="iconfont icon-postcode"></i></div>
            <div class="fl w550">
              <input type="tel" class="inp" placeholder="填写所在地邮政编码">
            </div>
          </li>
          <li class="sli" @click="switchAreaSelectShow(true)">
            <div class="lefticon"><i class="iconfont icon-address3"></i></div>
            <div class="fl w550">
              <input type="text" class="inp" placeholder="选择所在地区" v-model="addressEdit.area_info">
              <i class="of iconfont icon-downdot2"></i>
              <div class="tm"></div>
            </div>
          </li>
          <!--选择地址End-->
          <li class="sli">
            <div class="lefticon"><i class="iconfont icon-detailedaddress"></i></div>
            <div class="fl w550">
              <input type="text" class="inp" placeholder="填写详细地址" v-model="addressEdit.address">
            </div>
          </li>
          <li class="sli SetDefault">
            <div class="lefticon">
              <i class="iconfont icon-pitchon2" v-show="addressEdit.is_default == 1" @click="switchAddressDefault(false)"></i>
              <i class="iconfont icon-pitch2" v-show="addressEdit.is_default == 0" @click="switchAddressDefault(true)"></i>
            </div>
            <div class="fl text"> 设为默认地址 </div>
          </li>
        </ul>
      </div>

    </div>
    <vue-area :props-show="areaSelectShow" :props-result="result" v-on:result="areaResult"></vue-area>
    <div class="BottomGd">
      <button class="but_2 wauto" type="button" @click="save">保 存</button>
    </div>
    <back-nav></back-nav>
  </div>
</template>

<script>
  import vueArea from '../../components/area'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({addressList: 'addressList'}),
      mapRules({once: 'addressList'})
    ],
    data() {
      return {
        result: null,
        areaSelectShow: false,
        addressId: this.$route.params.id,
        addressIndex: -1,
        addressEdit: {
          address: '',
          area_id: '',
          area_info: '',
          city_id: '',
          mob_phone: '',
          prov_id: '',
          tel_phone: '',
          true_name: '',
          ycode: '',
          is_default: '0'
        },
        areaTxt: '北京'
      }
    },
    components: {
      'vue-area': vueArea
    },
    created() {
      this.initAddressEdit()
    },
    methods: {
      switchAddressDefault(boolValue) {
        this.addressEdit.is_default = boolValue ? '1' : '0'
      },
      switchAreaSelectShow(boolValue) {
        this.areaSelectShow = boolValue
      },
      initAddressEdit() {
        for (let i = 0; i < this.addressList.data.length; i++) {
          if (this.addressList.data[i].address_id == this.addressId) {
            this.addressEdit = this.$utils.clone(this.addressList.data[i])
            this.addressIndex = i
            break
          }
        }
      },
      areaResult(areaSelectShow, result) {
        this.areaSelectShow = areaSelectShow
        this.result = result
        this.addressEdit.prov_id = result.province.code
        this.addressEdit.city_id = result.city.code
        this.addressEdit.area_id = result.area.code
        this.addressEdit.area_info = result.province.name + ' ' + result.city.name + ' ' + result.area.name
      },
      save() {
        if (this.addressEdit.true_name === '') {
          this.$toast('请输入姓名')
          return
        }
        if (this.addressEdit.mob_phone == '') {
          this.$toast('请输入联系电话')
          return
        }
        if (this.addressEdit.area_id === '') {
          this.$toast('请选择所在地区')
          return
        }
        if (this.addressEdit.address === '') {
          this.$toast('请输入详细地址')
          return
        }
        this.$request.updateAddress(this.addressEdit).then(data => {
          this.addressList.data[this.addressIndex] = this.addressEdit
          if (this.addressEdit.is_default == '1') { // 是默认地址，需去除其他默认地址
            for (let i = 0; i < this.addressList.data.length; i++) {
              if (i != this.addressIndex) {
                this.addressList.data[i].is_default = '0'
              }
            }
          }
          this.$toast('更新收货地址成功')
          this.$router.go(-1)
        })
      }
    }
  }
</script>

<style>
  .is-danger {
    border: 1px solid red !important;
  }
</style>